<template>
	<div class="tabel_Background">
		<div class="tabel_Background-wra">

			<div class="title-wra">
				<div id="title1">
					<span class="title-text">{{ title }}</span>
				</div>
				<div id="title2">
					<el-select size="mini" style="width:100%;height:100%;" :style="setBackground" v-model="data.yearstr" @change="getMaxInfor()"
					 :popper-append-to-body="false" popper-class="eloption">
						<el-option v-for="item in timeDistribution" :key="item.value" :label="item.label" :value="item.label">
						</el-option>
					</el-select>
				</div>
			</div>
			<div class="listdata">
				<div class="listdata1" v-for="(value, index) in tableData" :key="index" @click="HandleTrue(value)">
					<div style="text-align: left;display:flex;justifyContent: space-between">
						<div class="list-head">
							<div class="head-icon" :style="{ backgroundColor: `${value.color}` }"></div>
							<div class="head-text">{{ value.name }}</div>
						</div>
						<div>{{ value.wellName }}</div>
						<div style="text-align: left;width: 80px;">
							{{ value.data }}
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
	import {
		winOpen
	} from "@/utils/common.js";

	import {
		getMax,
	} from "@/api/index";
	export default {
		name: "StatisticalData",
		props: {
			title: String
		},
		data() {
			return {
				setBackground: {
					backgroundImage: "url(" + require("../../assets/btn_year@2x.png") + ")",
					backgroundRepeat: "no-repeat",
					backgroundSize: "100% 100%"
				},
				tableData: [],
				data: {
					yearstr: ""
				},
				timeDistribution: [],
			};
		},
		mounted() {
			this.data.yearstr = new Date().getFullYear();
			this.getMaxInfor();

			// console.log(new Date().getFullYear() - 1);
			for (let i = 0; i < 7; i++) {
				let a = i + 1;
				this.timeDistribution.push({
					value: "选项" + a,
					label: new Date().getFullYear() - i
				});
			}
			this.timeDistribution.push({
				value: "选项8",
				label: "最近两年"
			});
			this.timeDistribution.push({
				value: "选项9",
				label: "最近三年"
			});
			this.timeDistribution.push({
				value: "选项10",
				label: "最近五年"
			});
			// this.initBarChart();
		},
		methods: {
			HandleTrue(val) {
				sessionStorage.setItem('wellName', val.wellName);
				sessionStorage.setItem('yearstr', this.data.yearstr);
				this.$router.replace("/MoreData");

			},
			async getMaxInfor() {
				const {
					data: res
				} = await getMax(this.data);
				// console.log(res.data['最大井深']);
				this.tableData = [{
						name: "最大井深",
						wellName: res.data['最大井深'][0].wellName,
						data: res.data['最大井深'][0].data + 'm',
						color: "#e9b69e"
					},
					{
						name: "最大井斜",
						wellName: res.data['最大井斜'][0].wellName,
						data: res.data['最大井斜'][0].data + '°',
						color: "#e9e199"
					},
					{
						name: "最多段数",
						wellName: res.data['最多段数'][0].wellName,
						data: res.data['最多段数'][0].data,
						color: "#19c9c7"
					},
					{
						name: "最多簇数",
						wellName: res.data['最多簇数'][0].wellName,
						data: res.data['最多簇数'][0].data,
						color: "#1494dc"
					},
					{
						name: "最长射厚",
						wellName: res.data['最长射厚'][0].wellName,
						data: res.data['最长射厚'][0].data + 'm',
						color: "#4978ce"
					},
				];
				// console.log(this.tableData);

			},
			// initBarChart() {
			// 	let myChart = this.$echarts.init(this.$refs.barChart);
			// 	// total 和 salary的数据就是各个环的数据
			// 	let total = 100;
			// 	let salayry1 = 80;
			// 	let salayry2 = 60;
			// 	let salayry3 = 50;
			// 	let salayry4 = 70;
			// 	let salayry5 = 85;
			// 	let salayry6 = 75;
			// 	let legenddata = [];
			// 	let seriesdata = [];
			// 	this.tableData.forEach((item, index) => {
			// 		let iname = item.name;
			// 		let inum = item.data;
			// 		legenddata.push({
			// 			name: item.name,
			// 			icon: "circle",
			// 			textStyle: {
			// 				color: "#D2D3D8" // 单独设置某一个图列的颜色
			// 			}
			// 		});
			// 	});
			// 	let option = {
			// 		color: [
			// 			"#00FFFF",
			// 			"#00B0FF",
			// 			"#FFC000",
			// 			"#FFAB6F",
			// 			"#63E315",
			// 			"#893BFF"
			// 		],
			// 		legend: {
			// 			orient: "vertical",
			// 			left: 180,
			// 			// x: 'right',
			// 			y: "center",
			// 			align: "left",
			// 			top: "6%",
			// 			itemHeight: 12, //图例的高度
			// 			itemGap: 12, //图例之间的间距
			// 			padding: [5, 20, 10, 5],
			// 			data: legenddata
			// 			//图例的名字需要和饼图的name一致，才会显示图例
			// 		},
			// 		series: [
			// 			// A版块
			// 			{
			// 				name: "最大井深",
			// 				type: "pie",
			// 				radius: ["70%", "75%"],
			// 				center: ["33%", "50%"],
			// 				// 是否顺时针旋转
			// 				clockwise: false,
			// 				//环的位置
			// 				label: {
			// 					show: false,
			// 					position: "center"
			// 				},
			// 				labelLine: {
			// 					normal: {
			// 						show: false
			// 					}
			// 				},
			// 				emphasis: {
			// 					label: {
			// 						show: true,
			// 						fontSize: "20",
			// 						fontWeight: "bold"
			// 					}
			// 				},
			// 				data: [{
			// 						value: salayry1 * 0.75, //需要显示的数据
			// 						name: salayry1 + "%",
			// 						itemStyle: {
			// 							normal: {
			// 								color: "#00FFFF"
			// 							}
			// 						}
			// 					},
			// 					{
			// 						value: (total - salayry1) * 0.75,
			// 						//不需要显示的数据，颜色设置成和背景一样
			// 						itemStyle: {
			// 							normal: {
			// 								color: "#818181"
			// 							}
			// 						},
			// 						tooltip: {
			// 							show: false
			// 						}
			// 					},
			// 					{
			// 						// 弃用25%的环形图不做显示
			// 						value: total * 0.25,
			// 						itemStyle: {
			// 							color: "rgba(0,0,0,0)"
			// 						},
			// 						tooltip: {
			// 							show: false
			// 						}
			// 					}
			// 				]
			// 			},
			// 			// B版块
			// 			{
			// 				name: "最大井斜",
			// 				type: "pie",
			// 				radius: ["60%", "65%"],
			// 				center: ["33%", "50%"],
			// 				// 是否顺时针旋转
			// 				clockwise: false,
			// 				//环的位置
			// 				label: {
			// 					show: false,
			// 					position: "center"
			// 				},
			// 				labelLine: {
			// 					normal: {
			// 						show: false
			// 					}
			// 				},
			// 				emphasis: {
			// 					label: {
			// 						show: true,
			// 						fontSize: "20",
			// 						fontWeight: "500"
			// 					}
			// 				},
			// 				data: [{
			// 						value: salayry2 * 0.75, //需要显示的数据
			// 						name: salayry2 + "%",
			// 						itemStyle: {
			// 							normal: {
			// 								color: "#00B0FF"
			// 							}
			// 						}
			// 					},
			// 					{
			// 						value: (total - salayry2) * 0.75,
			// 						//不需要显示的数据，颜色设置成和背景一样
			// 						itemStyle: {
			// 							normal: {
			// 								color: "#818181"
			// 							}
			// 						},
			// 						tooltip: {
			// 							show: false
			// 						}
			// 					},
			// 					{
			// 						// 弃用25%的环形图不做显示
			// 						value: total * 0.25,
			// 						itemStyle: {
			// 							color: "rgba(0,0,0,0)"
			// 						},
			// 						tooltip: {
			// 							show: false
			// 						}
			// 					}
			// 				]
			// 			},
			// 			// C版块
			// 			{
			// 				name: "最多段数",
			// 				type: "pie",
			// 				radius: ["50%", "55%"],
			// 				center: ["33%", "50%"],
			// 				// 是否顺时针旋转
			// 				clockwise: false,
			// 				//环的位置
			// 				label: {
			// 					show: false,
			// 					position: "center"
			// 				},
			// 				labelLine: {
			// 					normal: {
			// 						show: false
			// 					}
			// 				},
			// 				emphasis: {
			// 					label: {
			// 						show: true,
			// 						fontSize: "20",
			// 						fontWeight: "bold"
			// 					},
			// 					itemStyle: {
			// 						normal: {
			// 							color: "#FFC000"
			// 						}
			// 					}
			// 				},
			// 				data: [{
			// 						value: salayry3 * 0.75, //需要显示的数据
			// 						name: salayry3 + "%",
			// 						itemStyle: {
			// 							normal: {
			// 								color: "#FFC000"
			// 							}
			// 						}
			// 					},
			// 					{
			// 						value: (total - salayry3) * 0.75,
			// 						//不需要显示的数据，颜色设置成和背景一样
			// 						itemStyle: {
			// 							normal: {
			// 								color: "#818181"
			// 							}
			// 						},
			// 						tooltip: {
			// 							show: false
			// 						}
			// 					},
			// 					{
			// 						// 弃用25%的环形图不做显示
			// 						value: total * 0.25,
			// 						itemStyle: {
			// 							color: "rgba(0,0,0,0)"
			// 						},
			// 						tooltip: {
			// 							show: false
			// 						}
			// 					}
			// 				]
			// 			},
			// 			// D版块
			// 			{
			// 				name: "最多簇数",
			// 				type: "pie",
			// 				radius: ["40%", "45%"],
			// 				center: ["33%", "50%"],
			// 				// 是否顺时针旋转
			// 				clockwise: false,
			// 				//环的位置
			// 				label: {
			// 					show: false,
			// 					position: "center"
			// 				},
			// 				labelLine: {
			// 					normal: {
			// 						show: false
			// 					}
			// 				},
			// 				emphasis: {
			// 					label: {
			// 						show: true,
			// 						fontSize: "20",
			// 						fontWeight: "bold"
			// 					}
			// 				},
			// 				data: [{
			// 						value: salayry4 * 0.75, //需要显示的数据
			// 						name: salayry4 + "%",
			// 						itemStyle: {
			// 							normal: {
			// 								color: "#FFAB6F"
			// 							}
			// 						}
			// 					},
			// 					{
			// 						value: (total - salayry4) * 0.75,
			// 						//不需要显示的数据，颜色设置成和背景一样
			// 						itemStyle: {
			// 							normal: {
			// 								color: "#818181"
			// 							}
			// 						},
			// 						tooltip: {
			// 							show: false
			// 						}
			// 					},
			// 					{
			// 						// 弃用25%的环形图不做显示
			// 						value: total * 0.25,
			// 						itemStyle: {
			// 							color: "rgba(0,0,0,0)"
			// 						},
			// 						tooltip: {
			// 							show: false
			// 						}
			// 					}
			// 				]
			// 			},
			// 			// E版块
			// 			{
			// 				name: "最长射厚",
			// 				type: "pie",
			// 				radius: ["30%", "35%"],
			// 				center: ["33%", "50%"],
			// 				// 是否顺时针旋转
			// 				clockwise: false,
			// 				//环的位置
			// 				label: {
			// 					show: false,
			// 					position: "center"
			// 				},
			// 				labelLine: {
			// 					normal: {
			// 						show: false
			// 					}
			// 				},
			// 				emphasis: {
			// 					label: {
			// 						show: true,
			// 						fontSize: "20",
			// 						fontWeight: "bold"
			// 					}
			// 				},
			// 				data: [{
			// 						value: salayry5 * 0.75, //需要显示的数据
			// 						name: salayry5 + "%",
			// 						itemStyle: {
			// 							normal: {
			// 								color: "#63E315"
			// 							}
			// 						}
			// 					},
			// 					{
			// 						value: (total - salayry5) * 0.75,
			// 						//不需要显示的数据，颜色设置成和背景一样
			// 						itemStyle: {
			// 							normal: {
			// 								color: "#818181"
			// 							}
			// 						},
			// 						tooltip: {
			// 							show: false
			// 						}
			// 					},
			// 					{
			// 						// 弃用25%的环形图不做显示
			// 						value: total * 0.25,
			// 						itemStyle: {
			// 							color: "rgba(0,0,0,0)"
			// 						},
			// 						tooltip: {
			// 							show: false
			// 						}
			// 					}
			// 				]
			// 			},
			// 			// F版块
			// 			{
			// 				name: "最大排量",
			// 				type: "pie",
			// 				radius: ["20%", "25%"],
			// 				center: ["33%", "50%"],
			// 				// 是否顺时针旋转
			// 				clockwise: false,
			// 				label: {
			// 					show: false,
			// 					position: "center"
			// 					// normal: {
			// 					//     position: 'inner'
			// 					// }
			// 				},
			// 				labelLine: {
			// 					normal: {
			// 						show: false
			// 					}
			// 				},
			// 				emphasis: {
			// 					label: {
			// 						show: true,
			// 						fontSize: "20",
			// 						fontWeight: "bold"
			// 					}
			// 				},
			// 				data: [{
			// 						value: salayry6 * 0.75,
			// 						name: salayry6 + "%",
			// 						itemStyle: {
			// 							normal: {
			// 								color: "#893BFF"
			// 							}
			// 						}
			// 					},
			// 					{
			// 						value: (total - salayry6) * 0.75,
			// 						//不需要显示的数据，颜色设置成和背景一样
			// 						itemStyle: {
			// 							normal: {
			// 								color: "#818181"
			// 							}
			// 						},
			// 						tooltip: {
			// 							show: false
			// 						}
			// 					},
			// 					{
			// 						// 弃用25%的环形图不做显示
			// 						value: total * 0.25,
			// 						itemStyle: {
			// 							color: "rgba(0,0,0,0)"
			// 						},
			// 						tooltip: {
			// 							show: false
			// 						}
			// 					}
			// 				]
			// 			}
			// 		]
			// 	};
			// 	myChart.setOption(option);
			// }
		}
	};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="less" scoped>
	.tabel_Background {
		// margin-bottom: 5px;
		width: 100%; //3.02rem;
		min-width: 2.96rem;
		margin-top: 2%;
		height: 30%;
		box-sizing: border-box;
	}

	.tabel_Background-wra {
		width: 100%; //3.02rem;
		min-width: 2.96rem;
		height: 100%;
		// border: 1px solid rgb(12, 50, 107);
		background-image: url("../../assets/Panel@2x.png");
		// background-image: url('./../../../assets/mobile/pre-share-page@2x.png');
		background-repeat: no-repeat;
		background-size: 100% 100%; // contain; // cover;
		padding: 2%;
		box-sizing: border-box;
	}

	#title {
		width: 22%; //3.02rem;
		height: 11%;
		min-width: 2.96rem;
		text-align: center;
		font-size: 6px;
		background-image: url("../../assets/title_outline@2x.png");
		background-repeat: no-repeat;
		background-size: 100% 100%; //cover;
		position: relative;
	}

	.title-text {
		position: absolute;
		left: 5%;
		top: 17%;
		color: #21beeb;
		font-weight: bold;
	}

	.title-wra {
		display: flex;
		justify-content: space-between;
		width: 100%;
		height: 12%;
	}

	#title1 {
		width: 23%; //3.02rem;
		height: 100%;
		min-width: 2.96rem;
		text-align: center;
		font-size: 6px;
		background-image: url("../../assets/title_outline@2x.png");
		background-repeat: no-repeat;
		background-size: 100% 100%; //cover;
		position: relative;
	}

	.title-text {
		position: absolute;
		left: 5%;
		top: 17%;
		color: #21beeb;
		font-weight: bold;
	}

	#title2 {
		// float: left;
		width: 17%;
		margin-left: 6%;
		height: 100%;
		// background-color: red;
		border: 1px solid rgb(12, 50, 107);
		background-image: url("../../assets/bg_fxsj@2x.png");
		background-repeat: no-repeat;
		background-size: 100% 100%;
		color: #a9deee;

		.time-cls {
			margin-top: 3%;
			display: inline-block;
		}

		/deep/ .el-select-dropdown__item {
			//单独设置时间分布下拉框字体大小
			font-size: 8px;
			height: 30px;
			line-height: 30px;
		}


		.title-wra {
			display: flex;
			justify-content: space-between;
			width: 100%;
			height: 12%;
		}

		#title1 {
			width: 23%; //3.02rem;
			height: 100%;
			min-width: 2.96rem;
			text-align: center;
			font-size: 6px;
			background-image: url("../../assets/title_outline@2x.png");
			background-repeat: no-repeat;
			background-size: 100% 100%; //cover;
			position: relative;
		}

		.title-text {
			position: absolute;
			left: 5%;
			top: 17%;
			color: #21beeb;
			font-weight: bold;
		}

		#title2 {
			// float: left;
			width: 17%;
			margin-left: 6%;
			height: 100%;
			// background-color: red;
			border: 1px solid rgb(12, 50, 107);
			background-image: url("../../assets/bg_fxsj@2x.png");
			background-repeat: no-repeat;
			background-size: 100% 100%;
			color: #a9deee;

			.time-cls {
				margin-top: 3%;
				display: inline-block;
			}

			/deep/ .el-select-dropdown__item {
				//单独设置时间分布下拉框字体大小
				font-size: 8px;
				height: 30px;
				line-height: 30px;
			}

			/deep/.el-input__inner {
				font-size: 18px;
				color: #03d5fa;
				padding: 0;
				width: 100%;
				height: 100%;
				background: transparent;
				border: 1px solid #03d5fa;
				text-align: center;
			}

			/deep/ .el-select-dropdown {
				border: 1px solid #03d5fa;
				background-color: #121b33;
				color: #14adff;

				&:hover {
					background-color: #121b33;
				}
			}

			.el-select-dropdown__item {
				color: #03d5fa;
			}

			.el-select-dropdown__item.hover {
				background-color: #0d2a48;
			}

			/deep/.el-input--mini {
				height: 10%;
			}
		}


		/deep/.el-input__inner {
			font-size: 18px;
			color: #03d5fa;
			padding: 0;
			width: 100%;
			height: 100%;
			background: transparent;
			border: 1px solid #03d5fa;
			text-align: center;
		}

		/deep/.el-select-dropdown__wrap {
			// background-color: bisque !important;
			max-height: 200px !important;
		}

		/deep/ .el-select-dropdown {
			border: 1px solid #03d5fa;
			background-color: #121b33;
			color: #14adff;

			&:hover {
				background-color: #121b33;
			}
		}

		.el-select-dropdown__item {
			color: #03d5fa;
		}

		.el-select-dropdown__item.hover {
			background-color: #0d2a48;
		}

		/deep/.el-input--mini {
			height: 100%;
		}
	}



	.listdata {
		width: 100%;
		height: 80%;
		margin-top: 3%;
		// margin: 0 auto;
		font-size: 14px;
		// margin-left: 135px;
	}

	.listdata {
		width: 100%;
		height: 80%;
		margin-top: 3%;
		font-size: 20px;
	}

	.listdata1 {
		width: 70%;
		color: #23d0ff;
		margin: 0 auto;
		height: 18%;
		display: flex;
		flex-direction: column;
		justify-content: center;
		cursor: pointer;

		&:hover {
			background: #0c2947;
		}
	}

	.list-head {
		display: flex;
		width: 20%;
		align-items: center;
		justify-content: center;
	}

	.head-icon {
		width: 10px;
		height: 10px;
	}

	.head-text {
		color: #fff;
		margin-left: 5%;
	}

	p {
		display: inline-block;
	}
</style>
